<template>
  <el-menu router
           :default-openeds="menuInfo.horizontal.keyPath"
           :default-active="menuInfo.horizontal.key"
           :unique-opened="opened"
           :mode="mode"
           @select="handleSelect"
           background-color="#38cb7d"
           text-color="#ffffff"
           active-text-color="#ffd04b" >
    <template v-for="(x) in menuInfo.menus">
      <el-submenu v-if="x.children.length>0" :key="x.id" :index="''+x.id">
        <template slot="title">
          <span>{{x.name}}</span>
        </template>
        <template v-for="(y) in x.children">
          <el-submenu v-if="y.children.length>0" :index="''+y.id">
            <template slot="title">
              <span>{{y.name}}</span>
            </template>
            <el-menu-item v-for="(z) in y.children" :index="z.path" :key="z.id">
              {{z.name}}
            </el-menu-item>
          </el-submenu>
          <el-menu-item v-else :index="y.path">{{y.name}}</el-menu-item>
        </template>
      </el-submenu>
      <el-menu-item v-else :index="x.path">{{x.name}}</el-menu-item>
    </template>
  </el-menu>
</template>
<script type="es6">
  export default {
    data() {
      return {
        opened: true,
        fullscreenLoading: true,
      }
    },
    props: ['nav_model'],
    computed: {
      menuInfo() {
        return this.$store.state.menuInfo
      },
      mode() {
        return this.nav_model;
      }
    }
    ,
    methods: {
      handleOpen (key, keyPath) {
        // console.log(key,keyPath);
        // this.$store.commit("modifyMenuInfoActive",keyPath);
      },
      handleClose (key, keyPath) {
        // console.log(key,keyPath);
        // this.$store.commit("modifyMenuInfoActive",keyPath);
      },
      handleSelect: function (key, keyPath) {
        this.$store.commit("modifyMenuInfoActiveHorizontal",{key:key,keyPath:keyPath});
      }
    },
    mounted() {

    }
  }
</script>
<style scoped>
</style>
